application.yml
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">日志管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input class="form-control pull-right" id="searchNameId" name="table_search"
                               placeholder="用户名" type="text">
                        <div class="input-group-btn">
                            <button class="btn btn-default btn-search" id="search"
                                    type="button">
                                <i class="fa fa-search"></i>
                            </button>
                            <button class="btn btn-default btn-delete" id="delete"
                                    type="button">删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th><input id="checkAll" type="checkbox">全选</th>
                        <th>用户名</th>
                        <th>操作</th>
                        <th>请求方法</th>
                        <th>请求参数</th>
                        <th>IP</th>
                        <th>执行时长</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId">
                    <tr>
                        <td colspan="7">数据正在加载中...</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="box-footer clearfix" dm="100" id="pageId"></div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //加载数据和分页信息
        $("#pageId").load("doPageUI", function () {
            doGetObjects(); //异步加载用户行为日志信息
        });

        //注册全选的点击事件
        $("#checkAll").click(function () {
            var isCheck = $(this).prop("checked"); //true/false
            $("#tbodyId input:checkbox").prop("checked", isCheck);
        });

        //tbody中checkbox对象注册事件
        $("#tbodyId").on("click", ".cBox", doChangeTheadCheckBoxState);

        //注册查询的点击事件和删除事件
        $(".input-group-btn")
            .on("click", ".btn-search", doQueryObjects)
            .on("click", ".btn-delete", doDeleteById)
    })

    function doChangeTheadCheckBoxState() {
        //1.获取tbody中所有checkbox对象的状态，并进行逻辑与操作
        var flag = true;//初始值不能为false
        $("#tbodyId input:checkbox").each(function () {
            flag = flag && $(this).prop("checked")
        })
        //2.修改tbody中checkbox对象的状态
        $("#checkAll").prop("checked", flag);
    }

    function doQueryObjects() {
        var pageCurrent = $("#pageId").data("pageCurrent", 1);
        doGetObjects();
    }

    function doGetObjects() {
        //设置thead中checkbox对象的初始状态
        $("#checkAll").prop("checked", false);
        //debugger;//断点调试
        //1.定义url和参数
        var url = "log/doFindPageObjects"
        //? 请问data函数的含义是什么？(从指定元素上获取绑定的数据)
        //此数据会在何时进行绑定？(setPagination,doQueryObjects)
        var pageCurrent = $("#pageId").data("pageCurrent");
        var username = $("#searchNameId").val();
        //为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
        //pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
        if (!pageCurrent)
            pageCurrent = 1;

        var params = {
            "pageCurrent": pageCurrent,
            "username": username
        };//pageCurrent=2
        //2.发起异步请求
        //请问如下ajax请求的回调函数参数名可以是任意吗？可以,必须符合标识符的规范
        $.getJSON(url, params, function (result) {
            //请问result是一个字符串还是json格式的js对象？对象
            doHandleQueryResponseResult(result);
        });//特殊的ajax函数 }
    }

    //处理查询操作返回的结果
    function doHandleQueryResponseResult(result) { //JsonResult
        console.log(result);
        if (result.state == 1) { //正常信息
            //1.呈现当前页的用户行为日志记录
            doSetTableBodyRows(result.data.records);
            //2.呈现当前页的分页信息(总记录数,总页数,当前页...)
            doSetPagination(result.data);
        } else { //异常信息
            //若获取数据失败，清空数据
            //alert(result.message); //后续可能修改呈现异常信息的方式
            doHandleQueryResponseError(result.message);
        }
    }

    //处理日志查询时服务端响应的错误信息
    function doHandleQueryResponseError(message) {
        //设置itbody中的内容信息
        $("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
        //将页码值重新赋值
        doSetPagination({"rowCount": 0, "pagetCount": 0, "pageCurrent": 1});
    }

    //将用户行为日志记录呈现在table的tbody位置
    function doSetTableBodyRows(records) {
        //1.获取tbody对象并清空内容
        var tBody = $("#tbodyId");
        tBody.empty();
        //2.在tbody中追加日志记录
        records.forEach(item => {
            tBody.append(doCreateRow(item)); //基于数组的forEach函数迭代数组 =>为一个箭头运算符
        })
    }

    //基于数据创建当前行对象
    function doCreateRow(item) {
        return `<tr>
			<td><input type="checkbox" value=${item.id} class="cBox"></td>
			<td>${item.username}</td>
			<td>${item.operation}</td>
			<td>${item.method}</td>
			<td>${item.params}</td>
			<td>${item.ip}</td>
			<td>${item.time}</td>
		</tr>`
    }

    //根据选中id删除
    function doDeleteById() {
        if (!confirm("确定删除吗?")) return;
        //获取所有的checkbox选择框的id
        var check = $("#tbodyId input:checked");
        //获取路径
        var url = "log/doDeleteById";
        //拼接id,用逗号分隔
        var arr = [];
        $("#tbodyId input:checkbox:checked").each(function () {
            arr.push($(this).val());
        })
        var params = {"id": arr.toString()}; //[1,2,3] -> 1,2,3
        //发送异步请求
        $.getJSON(url, params, function (result) {
            //发送状态
            if (result.state == 1) {
                doRefreshAfterDeleteOK();
            } else {
                alert(result.message);
            }
        })
    }

    //删除以后的刷新操作:要么继续查询当前页数据，要么查询上一页数据(最后一页)
    function doRefreshAfterDeleteOK() {
        //1.获取当前页码值,总页数,全选状态
        var pageCurrent = $("#pageId").data("pageCurrent");
        var pageCount = $("#pageId").data("pageCount");
        var checkedAll = $("#checkAll").prop("checked");
        //2.基于当前页码值以及全选状态修改当前页码值
        if (pageCurrent == pageCount && checkedAll && pageCurrent > 1) { //最后一页全选状态
            pageCurrent--;
            $("#pageId").data("pageCurrent", pageCurrent);
        }
        //3.重新执行查询
        doGetObjects();
    }


</script>






